<template>
  <div class="bj">
    <div style="height: 100%; width: 470px">
      <div class="left1">
        <div class="text1">双线质量管控体</div>
        <div class="text11">力求每件产品 、 每个细节都尽善尽美</div>
      </div>
      <div class="left2"></div>
      <div class="text2">够专业才放心</div>
    </div>
    <div style="width: 420px; height: 100%">
      <div id="middle" class="middle">
        <div class="middleText">All Rights Reserved ©2021 版权所有｜ 粤ICP备18069755号</div>
      </div>
    </div>
    <div style="width: 550px; height: 100%">
      <div class="right" id="right">
        <div class="regihtText1">欢迎使用</div>
        <div class="regihtText2">系统登陆</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="90px"
          class="a1"
        >
          <!-- ref可代表组件的实体 -->
          <el-form-item label="用户名" prop="userName" class="a2">
            <el-input
              v-model="ruleForm.userName"
              class=""
              autosize
            >
              <img
                slot="prefix"
                src="../assets/yh.png"
                style="margin-left: 8px;height:12px;width:12px"
              />
            </el-input>
          </el-form-item>

          <el-form-item label="密码" prop="passWord" class="">
            <el-input
              v-model="ruleForm.passWord"
              class="a6"
              autosize
              placeholder="请输入密码"
              show-password
            >
              <img
                slot="prefix"
                src="../assets/mm.png"
                style="margin-left: 8px;height:12px;width:12px"
              />
            </el-input>
          </el-form-item>
        </el-form>
        <button class="register" @click="submitForm" >登陆</button>
      </div>
    </div>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

import md5 from 'js-md5'

// import axios from "axios";
// console.log(axios);

export default {
  name: "App",
  components: {
    //HelloWorld
  },
  data() {
    return {
      ruleForm: {
        userName:"",
        passWord:"",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //提交表单
    submitForm() {
      console.log('this.$refs',this.$refs)
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          // 为给定 ID 的 user 创建请求
          
          //  axios.get('/user',this.ruleForm)
          //   .then(function (response) {
          //     console.log(response);
          //   })
          //   .catch(function (error) {
          //     console.log(error);
          //   });
                this.$http({
                  url: "/login",
                  method: "POST",
                  data: {
                    userName: this.ruleForm.userName,
                    passWord: md5(this.ruleForm.passWord),
                    platform: 'Web',
                  },
                }).then((res) => {
                  if (!res.errorMsg) {
                    localStorage.setItem('token', res.token);
                    localStorage.setItem('user', JSON.stringify(res));
                    this.$router.push("/index");
                  }
                });
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
/* @media screen and (max-width:1440px){
        .left{
            transform: translate(50px,-55%) scale(0.8);
        }

       /*  .bottom{
            transform: translate(-100px,50%) scale(0.8);
        }

        .right{
            transform: translate(0px,10px) scale(0.8);
        } 
    } */
* {
  /* 去除外边距和内边距 */
  margin: 0;
  padding: 0;
}
.bj {
  display: flex;
  background: url(../assets/bj.png) no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* 与页面显示同步*/
  height: 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover; /* 图片随屏幕大小同步缩放 */
  background-position: center 0;
}
.left1 {
  position: absolute;
  background-color: rgba(224, 242, 250, 0.3);
  margin-top: 213px;
  margin-left: 90px;
  height: 171px;
  width: 124px;
  display: flex;
}
.text1 {
  width: 19px;
  font-size: 19px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  color: rgb(255, 255, 255);
  margin-left: 50px;
  margin-top: 30px;
  line-height: 22px;
}
.text11 {
  width: 10px;
  font-size: 17px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  color: #ffffff;
  line-height: 23px;
  margin-top: 30px;
  margin-left: 21px;
}

.left2 {
  position: absolute;
  background-color: rgba(224, 242, 250, 0.3);
  margin-top: 380px;
  margin-left: 190px;
  height: 171px;
  width: 124px;
  display: flex;
}
.text2 {
  margin-top: 265px;
  margin-left: 220px;
  position: absolute;
  width: 1px;
  height: 37px;
  font-size: 30px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #6bb9da;
  line-height: 40px;
  white-space: pre-wrap;
}
 
  .a1 {
    margin-top: 40px;
    width: 350px;
  }
  
  .a2 {
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #737474;
  }
  
 
  
  .a3 {
    letter-spacing: 7px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #737474;
  }
  

.middle {
  margin-top: 700px;
}
.middleText {
  width: 428px;
  height: 17px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #565656;
  line-height: 24px;
}
.right {
  width: 378px;
  height: 378px;
  background: #efeff0;
  border-radius: 21px;
  opacity: 0.9;
  /* transform:translateY(-50%);
    top: 50%; 也能居中*/
  top: 25%;
  position: relative;
}
.regihtText1 {
  padding-top: 24px;
  margin-left: 34px;
  height: 17px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #96a3b0;
}

.regihtText2 {
  margin-top: 7px;
  margin-left: 34px;
  font-size: 28px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #4e4e4e;
}

.userName {
  height: 40px;
  display: flex;
  margin-top: 40px;
}

.userName1 {
  margin-left: 34px;
  margin-top: 10px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #737474;
}

.yht {
  background-image: url(../assets/yh.png);
  background-repeat: no-repeat;
  width: 13px;
  height: 14px;
  background-size: 13px 14px;
  margin-left: 95px;
  margin-top: 14px;
  position: absolute;
}
.input1 {
  width: 270px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid #dfefff;
  margin-left: 10px;
}

.input11 {
  border: none;
  font-size: 14px;
  width: 230px;
  height: 40px;
  background: #f1f1f1;
  margin-left: 30px;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
}

.passWord {
  height: 40px;
  width: 100%;
  display: flex;
  margin-top: 40px;
}
.userPassWord {
  letter-spacing: 15px;
  margin-left: 34px;
  margin-top: 10px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #737474;
}

.mmt {
  background-image: url(../assets/mm.png);
  background-repeat: no-repeat;
  width: 13px;
  height: 14px;
  background-size: 13px 14px;
  margin-left: 95px;
  margin-top: 14px;
  position: absolute;
}
.input2 {
  width: 270px;
  height: 39px;
  border-radius: 10px;
  border: 2px solid #dfefff;
  margin-left: -5px;
}
.input22 {
  border: none;
  font-size: 14px;
  width: 230px;
  height: 40px;
  background: #f1f1f1;
  margin-left: 30px;
  border-radius: 5px;
}

.register {
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #f4f4f5;
  margin-top: 56px;
  margin-left: 33px;
  width: 318px;
  height: 40px;
  background: #409eff;
  border: none;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  font-size: 17px;
}
</style>
